<template>
  <div>
    <r-search
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :searchData="searchData"
    />
    <r-table
      :isSelection="false"
      :isIndex="false"
      :isPagination="true"
      :isHandle="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="tablePage"
      :tableHandles="tableHandles"
      @refresh="init()"
    >
    </r-table>

    <r-form
      labelWidth="230px"
      :isHandle="true"
      :formRules="formRules"
      :formCols="formCols"
      :formHandle="formHandle"
      :formData="formData"
      ref="elForm"
      :inline="false"
      dialogWidth="900px"
    >
      <!--            <div :slot="'door'+(index+1)" v-for="(item,index) in callLists" :key="index">-->
      <!--                <span v-for="(item2,index2) in item" :key="index2" style="margin-right:10px;margin-bottom:10px;float:left;cursor: pointer;">-->
      <!--                    <el-tag @click="callClick(item2,index)" :type="item2.type">{{index2+1}}号称</el-tag>-->
      <!--                </span>-->
      <!--            </div>-->
      <!-- 点击Edit按钮出现的Template，里面的站点地址 -->
      <!-- 省/市/区/街 -->
      <!-- <div class="zhandiandiz" v-if="isshowss"><span>省/市/区/街</span>
        <el-select v-model="sValue" placeholder="Please Select省份" @change="sZhandiandizhi($event)" class="szddz">
          <el-option v-for="item in sOption" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
       
        <el-select v-model="cValue" placeholder="Please Select城市" @change="cZhandiandizhi($event)" class="czddz">
          <el-option v-for="item in cOption" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
       
        <el-select v-model="qValue" placeholder="Please Select区/县" @change="qZhandiandizhi($event)" class="qzddz">
          <el-option v-for="(item,index) in qOption" :key="index" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
     
        <el-select v-model="jValue" placeholder="Please Select街道" @change="jZhandiandizhi($event)" class="jzddz">
          <el-option v-for="(item,index) in jOption" :key="index" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div> -->
      <div slot="slot3" style="position: relative;left: -150px;">
        <div
          id="searchResultPanel"
          style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"
        ></div>
        <p>
          Click On The Map To Confirm The Coordinates, Longitude:{{
            formData.lng
          }}
          Latitude:{{ formData.lat }}
        </p>
        <div id="l-map"></div>
      </div>
    </r-form>
    <r-form
      :formRules="formRulesEditPsw"
      :formHandle="formHandleEditPsw"
      :formData="formDataEditPsw"
      :formCols="formColsEditPsw"
      ref="elFormEditPsw"
      labelWidth="200px"
      dialogWidth="1000px"
      :isHandle="true"
    />
    <r-form
      :formRules="formRulesActive"
      :formHandle="formHandleActive"
      :formData="formDataActive"
      :formCols="formColsActive"
      ref="elFormActive"
      labelWidth="200px"
      dialogWidth="1000px"
      :isHandle="true"
    />
  </div>
</template>

<script>
import baidumap from "../js/baidumap";
export default {
  data() {
    var checkpass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("Enter Again PassWord"));
      } else if (value !== this.formData.password) {
        callback(new Error("The password is not the same!"));
      } else {
        callback();
      }
    };
    var checkpass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("Enter Again PassWord"));
      } else if (value !== this.formDataEditPsw.password) {
        callback(new Error("The password is not the same!"));
      } else {
        callback();
      }
    };
    return {
      pt: "116.331398, 39.897445",
      isshowss: false, //Control省市区街显示隐藏
      sValue: "", //Edit页面 站点地址 选项的值(省)
      sLabel: "", //Edit页面 站点地址 选项的键名(省)
      sJingwei: "", //Edit页面 站点地址 选项的经纬度(省)
      sOption: [], //Edit页面 站点地址 Data源(省)
      cValue: "", //Edit页面 站点地址 选项的值(市)
      cLabel: "", //Edit页面 站点地址 选项的键名(市)
      cJingwei: "", //Edit页面 站点地址 选项的经纬度(市)
      cOption: [], //Edit页面 站点地址 Data源(市)
      qValue: "", //Edit页面 站点地址 选项的值(区)
      qLabel: "", //Edit页面 站点地址 选项的键名(区)
      qJingwei: "", //Edit页面 站点地址 选项的经纬度(区)
      qOption: [], //Edit页面 站点地址 Data源(区)
      jValue: "", //Edit页面 站点地址 选项的值(街道)
      jLabel: "", //Edit页面 站点地址 选项的键名(街道)
      jJingwei: "", //Edit页面 站点地址 选项的经纬度(街道)
      jOption: [], //Edit页面 站点地址 Data源(街道)
      baiduMap: null,
      //
      searchData: {
        name: "",
        phone: "",
        contacts: ""
        // address: '',
      },
      searchForm: [
        {
          type: "input",
          prop: "name",
          placeholder: "Agent Name",
          width: 220
        },
        // {
        //   type: 'input',
        //   prop: 'address',
        //   placeholder: 'Agent地址',
        //   width: 150
        // },
        {
          type: "input",
          prop: "contacts",
          placeholder: "Contacts",
          width: 190
        },
        {
          type: "input",
          prop: "phone",
          placeholder: "Phone",
          width: 180
        }
      ],

      searchHandle: [
        {
          label: "Search",
          type: "success",
          plain: true,
          icon: "el-icon-search",
          handle: e => {
            this.zeroFn();
            this.init();
          }
        },
        {
          label: "Reset",
          buttonss: true,
          icon: "el-icon-refresh-right",
          handle: e => {
            this.searchData = {
              name: "",
              phone: "",
              contacts: ""
            };
            this.zeroFn();
            this.init();
          }
        }
      ],

      tableHandles: [
        {
          label: "Add Agent",
          type: "primary",
          plain: true,
          handle: e => {
            this.formData.id = null;
            this.isshowss = true;
            this.createdAcc();
          }
        }
      ],
      tableData: [{}],
      tableCols: [
        // {
        //   label: '序号',
        //   prop: 'id'
        // },
        {
          label: "Agent Name",
          prop: "name"
        },
        {
          label: "Agent Address",
          prop: "address"
        },
        {
          label: "Login Account",
          prop: "account"
        },
        {
          label: "Contacts",
          prop: "contacts"
        },
        {
          label: "Phone",
          prop: "phone"
        },
        {
          label: "Device Number",
          prop: "deviceNum",
          formatter: e => (e.deviceNum ? e.deviceNum + "台" : "--")
        },
        {
          label: "Partition Ratio Column",
          prop: "withdrawMoney",
          type: "html",
          html: row => {
            let html =
              "" +
              "<p>Recharge：" +
              row.proportionCd +
              "%</p>" +
              "<p>Battery Swap：" +
              row.proportionHd +
              "%</p>" +
              "<p>Rent Car：" +
              row.proportionZc +
              "%</p>";

            return html;
          }
        },
        // {
        //   label: '站点数量',
        //   type: 'html',
        //   html: (row) => {
        //     let html = '<p>' +
        //       (row.params && row.params.siteNum)
        //       + '</p>'
        //     return html
        //   }
        // },
        {
          label: "Turnover",
          prop: "totalRevenue",
          formatter: e => (e.totalRevenue ? "$" + e.totalRevenue : "--")
        },
        {
          label: "Enable Status",
          prop: "state",
          formatter: e => (e.state == 1 ? "Enable" : "Forbidden"),
          theme: e => (e.state == "1" ? "primary" : "danger"),
          type: "tag"
        },
        {
          label: "Operations",
          type: "button",
          width: 200,
          btnList: [
            {
              label: "Edit",
              type: "primary",
              plain: true,
              handle: row => {
                this.isshowss = false;
                this.createdAcc(row);
              }
            },
            {
              label: "Delete",
              type: "danger",
              plain: true,
              handle: row => this.del(row)
            }
          ]
        }
      ],
      tablePage: { limit: 10, page: 1, total: 0 },
      formData: {
        name: "",
        contacts: "",
        phone: "",
        account: "",
        password: "",
        address: "",
        proportionCd: "",
        proportionHd: "",
        proportionZc: "",
        lng: "",
        lat: ""
      },
      formCols: [
        {
          type: "input",
          label: "Agent Name",
          placeholder: "Please InputAgent Name",
          width: 350,
          prop: "name"
        },
        {
          type: "input",
          label: "Contacts",
          placeholder: "Please Enter",
          width: 350,
          prop: "contacts"
        },
        {
          type: "input",
          label: "Phone",
          placeholder: "Please Input Contact Information",
          width: 350,
          prop: "phone"
        },
        {
          type: "input",
          label: " Login Account",
          placeholder: "Please Input Login Account",
          width: 350,
          prop: "account"
        },
        {
          type: "input",
          isShow: () => {
            return this.formData.id ? true : true;
          },
          label: "Password",
          placeholder: "Please Input Password",
          width: 350,
          prop: "password"
        },
        {
          type: "input",
          label: "Charging Order Sharing Ratio",
          placeholder: "Please Enter",
          width: 350,
          prop: "proportionCd",
          remark: "%"
        },
        {
          type: "input",
          label: "Battery Swap Orders Share Ratio",
          placeholder: "Please Enter",
          width: 350,
          prop: "proportionHd",
          remark: "%"
        },
        {
          type: "input",
          label: "Share Of Rental Orders",
          placeholder: "Please Enter",
          width: 350,
          prop: "proportionZc",
          remark: "%"
        },
        // { //只有Add才有，Edit没有
        //   type: "", isShow: () => { return !this.formData.id ? true : false; }
        // },
        {
          type: "input",
          id: "suggestId",
          label: "Agent Address",
          width: 350,
          prop: "address"
        },
        { type: "slot", name: "slot3", label: "", prop: "lng" }
      ],
      formRules: {
        name: [{ required: true, message: "Please Enter", trigger: "blur" }],
        contacts: [
          { required: true, message: "Please Enter", trigger: "blur" }
        ],
        phone: [
          {
            required: true,
            message: "Please Input Contact Information",
            trigger: "blur"
          }
        ],
        account: [
          {
            required: true,
            message: "Please Input Login Account",
            trigger: "blur"
          }
        ],
        password: [
          { required: true, message: "Please Input Password", trigger: "blur" }
        ],

        proportionCd: [
          { required: true, message: "Please Enter", trigger: "blur" }
        ],
        proportionHd: [
          { required: true, message: "Please Enter", trigger: "blur" }
        ],
        proportionZc: [
          { required: true, message: "Please Enter", trigger: "blur" }
        ],
        lng: [
          {
            required: true,
            message: "Click On The Map To Select Latitude And Longitude",
            trigger: "blur"
          }
        ],
        address: [{ required: true, message: "Please Enter", trigger: "blur" }]
      },
      formHandle: [
        {
          label: "Cancel",
          handle: e => this.elFormVisible()
        },
        {
          label: "Confirm",
          type: "success",
          handle: e => this.elFormSubmit()
        }
      ],
      //密码
      formDataEditPsw: {
        password: "",
        enterPassword: ""
      },
      formColsEditPsw: [
        {
          type: "input",
          label: "Password",
          placeholder: "Please Input Password",
          width: 350,
          prop: "password"
        },
        {
          type: "input",
          label: "Confirm Password",
          placeholder: "Please Input Confirm Password",
          width: 350,
          prop: "enterPassword"
        }
      ],
      formRulesEditPsw: {
        password: [{ required: true, message: "Password", trigger: "blur" }],
        enterPassword: [
          {
            required: true,
            validator: checkpass2,
            message: "Please Confirm Whether The Two Passwords Are The Same",
            trigger: "blur"
          }
        ]
      },
      formHandleEditPsw: [
        {
          label: "Cancel",
          handle: e => this.elFormVisibleEditPsw()
        },
        {
          label: "Confirm",
          type: "success",
          handle: e => this.elFormSubmitEditPsw()
        }
      ],
      //Forbidden恢复
      formDataActive: {
        isActive: ""
      },
      formRulesActive: {},
      formColsActive: [
        {
          label: "Forbidden/Restore Selected Account",
          width: 350,
          prop: "isActive"
        }
        // { type: "input", label: "确认密码", placeholder: 'Please Input确认密码', width: 350, prop: "enterPassword" },
      ],
      formHandleActive: [
        {
          label: "Cancel",
          handle: e => this.elFormVisibleActive()
        },
        {
          label: "Confirm",
          type: "primary",
          handle: e => this.elFormSubmitActive()
        }
      ],
      checkBox: []
    };
  },
  created() {},
  mounted() {
    this.setCall(20, 2);
    this.init();
  },
  methods: {
    zeroFn() {
      this.tablePage.limit = 10;
      this.tablePage.page = 1;
      this.tablePage.total = 0;
    },
    async init() {
      let param = {
        ...this.searchData,
        ...{
          pageNum: this.tablePage.page,
          pageSize: this.tablePage.limit
        }
      };
      let res = await this.apis.agent_list(param);

      if (res) {
        this.tableData = res.rows || [];
        this.tablePage.total = res.total;
      }
      // Edit页面 站点地址  ---拿到省份(Data)
      const addressRes = await this.apis.allAddressList({});
      if (addressRes.code === 0) {
        var array = new Array();
        addressRes.result.forEach(item => {
          let obj = {
            label: item.name,
            value: item.adcode,
            jingwei: item.center
          };
          this.sOption.push(obj);
          array.push(obj);
        });

        this.formCols[this.labIndex2(this.formCols, "address")].options = array;
      }
    },
    setCall(callNum, doorNum) {
      var arr = [];
      for (var i = 0; i < doorNum; i++) {
        var arr2 = [];
        for (var j = 0; j < callNum; j++) {
          arr2.push({
            type: "info",
            status: 1,
            id: j + 1
          });
        }
        arr.push(arr2);
      }
      this.callLists = arr;
    },
    callClick(item, index) {
      console.log(item);
      console.log(index);
      for (var i = 0; i < this.callLists.length; i++) {}
      item.type = "success";
    },
    map() {
      var that = this;
      var map = baidumap(that);
      this.baiduMap = map;
      var geoc = new BMap.Geocoder();
      map.addEventListener("click", function(e) {
        that.formData.lng = e.point.lng;
        that.formData.lat = e.point.lat;
        var pt = e.point;
        geoc.getLocation(pt, function(rs) {
          that.formData.address = rs.address; //点击地图拿到详细地址
          var addComp = rs.addressComponents;
          // that.formData.city = addComp.city;
          // alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
        });
      });
      map.enableScrollWheelZoom(); //Enable滚轮放大缩小，默认Forbidden
      map.enableContinuousZoom(); //Enable地图惯性拖拽，默认Forbidden
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve();
        }, 10);
      });
    },
    createdAcc(row) {
      if (row) {
        this.formData.id = row.id;
        this.formRules.password[0].required = false;
      } else {
        this.formData.id = "";
        this.formRules.password[0].required = true;
      }
      this.elFormVisible().then(res => {
        this.map().then(res => {
          if (row) {
            Object.keys(this.formData).forEach(key => {
              this.formData[key] = row[key];
            });

            this.formData.password = "";
          }
        });
      });
    },
    elFormSubmit() {
      this.$refs.elForm.$refs.ruleForm.validate(async valid => {
        if (valid) {
          if (this.formData.id) {
            let res = await this.apis.agent_updata(this.formData);
            if (res) {
              this.init();
              this.elFormVisible();
            }
          } else {
            let res = await this.apis.agent_save(this.formData);
            if (res) {
              this.init();
              this.elFormVisible();
            }
          }
        }
      });
    },
    elFormDetail(row) {
      // this.elFormVisible()
    },
    elFormDetailEditPsw(row) {
      Object.keys(this.formDataEditPsw).forEach(key => {
        this.formDataEditPsw[key] = row[key];
      });
      this.formDataEditPsw.id = row.id;
      this.formDataEditPsw.password = "";
      this.formDataEditPsw.name = row.name;
      this.formDataEditPsw.phone = row.phone;
      this.formDataEditPsw.address = row.address;
      this.formDataEditPsw.longitude = row.longitude;
      this.formDataEditPsw.latitude = row.latitude;
      this.formDataEditPsw.proportion = row.proportion;
      this.elFormVisibleEditPsw();
    },
    elFormVisibleEditPsw(tit) {
      if (this.$refs.elFormEditPsw.$refs.ruleFormEditPsw) {
        this.$refs.elFormEditPsw.$refs.ruleFormEditPsw.resetFields();
        this.$data.formDataEditPsw = this.$options.data.call(
          this
        ).formDataEditPsw;
      }
      this.$refs.elFormEditPsw.dialogFormVisible = !this.$refs.elFormEditPsw
        .dialogFormVisible;
      this.$refs.elFormEditPsw.dialogFormTitle = tit
        ? tit
        : this.formDataEditPsw.id
        ? "Edit"
        : "Add";

      if (this.$refs.elFormEditPsw.dialogFormVisible) {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve();
          }, 2000);
        });
      }
    },
    async elFormSubmitEditPsw() {
      let res = await this.api.regionedit(this.formDataEditPsw);
      if (res) {
        this.init();
        this.elFormVisibleEditPsw();
      }
    },
    elFormDetailActive(row) {
      Object.keys(this.formDataActive).forEach(key => {
        this.formDataActive[key] = row[key];
      });
      this.formDataActive.id = row.id;
      this.elFormVisibleActive();
    },
    elFormVisibleActive(tit) {
      if (this.$refs.elFormActive.$refs.ruleFormActive) {
        this.$refs.elFormActive.$refs.ruleFormActive.resetFields();
        this.$data.formDataActive = this.$options.data.call(
          this
        ).formDataActive;
      }
      this.$refs.elFormActive.dialogFormVisible = !this.$refs.elFormActive
        .dialogFormVisible;
      this.$refs.elFormActive.dialogFormTitle = tit
        ? tit
        : this.formDataActive.id
        ? "Edit"
        : "Add";

      if (this.$refs.elFormActive.dialogFormVisible) {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve();
          }, 2000);
        });
      }
    },
    async elFormSubmitActive() {
      // console.log(this.formDataActive.id);
      let res = await this.api.regionchange(this.formDataActive);
      if (res) {
        this.init();
        this.elFormVisibleActive();
      }
    },

    del(row) {
      this.$confirm("Confirm Delete？", "Hint", {
        confirmButtonText: "Confirm",
        cancelButtonText: "Cancel",
        type: "warning"
      })
        .then(async () => {
          var res = await this.apis.agent_delete({
            id: row.id
          });
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "Delete Success!"
            });
          } else {
            this.$message({
              type: "error",
              message: res.msg
            });
          }
          this.init();
        })
        .catch(() => {});
    },
    // // Edit页面 站点地址 的点击方法(省)
    sZhandiandizhi(value) {
      // console.log(value);
      let sObj = {};
      sObj = this.sOption.find(item => {
        //这里的sOption就是上面遍历的Data源
        return item.value === value; //筛选出匹配Data
      });
      this.sLabel = sObj.label; //拿到键名
      this.sOption.find(item => {
        //经纬度
        if (item.value === value) {
          this.sJingwei = item.jingwei;
        }
      });
      //拿到后端返回的经纬度，赋值给地图上的经纬度
      this.formData.lng = this.sJingwei.split(",")[0];
      this.formData.lat = this.sJingwei.split(",")[1];
      this.pt = this.sJingwei;
    },

    // // Edit页面 站点地址 的点击方法(市)
    cZhandiandizhi(value) {
      // console.log(value);
      let cObj = {};
      cObj = this.cOption.find(item => {
        //这里的cOption就是上面遍历的Data源
        return item.value === value; //筛选出匹配Data
      });
      this.cLabel = cObj.label; //拿到键名
      this.cOption.find(item => {
        //经纬度
        if (item.value === value) {
          this.cJingwei = item.jingwei;
        }
      });
      //拿到后端返回的经纬度，赋值给地图上的经纬度
      this.formData.lng = this.cJingwei.split(",")[0];
      this.formData.lat = this.cJingwei.split(",")[1];
      this.pt = this.cJingwei;
    },
    // // Edit页面 站点地址 的点击方法(区)
    qZhandiandizhi(value) {
      let qObj = {};
      qObj = this.qOption.find(item => {
        //这里的cOption就是上面遍历的Data源
        return item.value === value; //筛选出匹配Data
      });
      this.qLabel = qObj.label; //拿到键名
      this.qOption.find(item => {
        //经纬度
        if (item.value === value) {
          this.qJingwei = item.jingwei;
        }
      });
      //拿到后端返回的经纬度，赋值给地图上的经纬度
      this.formData.lng = this.qJingwei.split(",")[0];
      this.formData.lat = this.qJingwei.split(",")[1];
      this.pt = this.qJingwei;
    },

    // // Edit页面 站点地址 的点击方法(街道)
    jZhandiandizhi(value) {
      let jObj = {};
      jObj = this.jOption.find(item => {
        //这里的jOption就是上面遍历的Data源
        return item.value === value; //筛选出匹配Data
      });
      this.jLabel = jObj.label; //拿到键名
      console.log(this.jLabel);
      this.jOption.find(item => {
        //经纬度
        if (item.value === value) {
          this.jJingwei = item.jingwei;
        }
      });
      //拿到后端返回的经纬度，赋值给地图上的经纬度
      this.formData.lng = this.jJingwei.split(",")[0];
      this.formData.lat = this.jJingwei.split(",")[1];
      this.pt = this.jJingwei;
    },

    // // Edit页面地图 ---拿到城市（Data）
    czhandianfangfa(label, value) {
      this.cOption = []; //每次进来先清空城市的Data源
      this.apis
        .allAddressList({
          name: label,
          code: value
        })
        .then(res => {
          if (res.code === 0) {
            console.log(res);
            res.result.forEach(item => {
              let obj = {
                label: item.name,
                value: item.adcode,
                jingwei: item.center
              };
              this.cOption.push(obj);
            });
            console.log("市", this.cOption);
          }
        });
    },

    // // Edit页面地图 ---拿到区（Data）
    qzhandianfangfa(label, value) {
      this.qOption = []; //每次进来先清空区/县的Data源
      this.apis
        .allAddressList({
          name: label,
          code: value
        })
        .then(res => {
          if (res.code === 0) {
            res.result.forEach(item => {
              let obj = {
                label: item.name,
                value: item.adcode,
                jingwei: item.center
              };
              this.qOption.push(obj);
            });
            console.log("区", this.cOption);
          }
        });
    },
    // // Edit页面地图 ---拿到街道（Data）
    jzhandianfangfa(label, value) {
      this.jOption = []; //每次进来先清空街道的Data源
      this.apis
        .allAddressList({
          name: label,
          code: value
        })
        .then(res => {
          if (res.code === 0) {
            console.log(res);
            // 增加判断，如果镇下面没有街道，就直接让街道变成空
            if (res.result.length !== 0) {
              res.result.forEach(item => {
                let obj = {
                  label: item.name,
                  value: item.adcode,
                  jingwei: item.center
                };
                this.jOption.push(obj);
              });
            } else {
              this.jOption = [];
            }
            console.log("街", this.jOption);
          }
        });
    }
  },
  watch: {
    // 监听省，如果下拉框的省发生改变，就会发送请求，更新市的Data
    sLabel(newV, oldV) {
      if (newV !== oldV) {
        // 调用Edit页面 --站点地址-- 城市（Data） 的方法
        this.czhandianfangfa(this.sLabel, this.sValue);
        // 当重新选择省，市区街和站点地址情况，重新更新
        this.cLabel = "";
        this.qLabel = "";
        this.jLabel = "";
        this.cValue = "";
        this.qValue = "";
        this.jValue = "";
      }
    },
    // 监听市，如果下拉框的市发生改变，就会发送请求，更新区的Data
    cLabel(newV, oldV) {
      if (newV !== oldV) {
        // 调用Edit页面 --站点地址-- 区（Data） 的方法
        this.qzhandianfangfa(this.cLabel, this.cValue);
        // 当重新选择市，区街和站点地址情况，重新更新
        this.qLabel = "";
        this.jLabel = "";
        this.qValue = "";
        this.jValue = "";
      }
    },
    // 监听区，如果下拉框的区发生改变，就会发送请求，更新街道的Data
    qLabel(newV, oldV) {
      if (newV !== oldV) {
        // 调用Edit页面 --站点地址-- 街道（Data） 的方法
        this.jzhandianfangfa(this.qLabel, this.qValue);
        // 当重新选择区，街和站点地址情况，重新更新

        this.jLabel = "";
        this.jValue = "";
      }
    },
    // 监听街道，如果下拉框的街道发生改变，就会发送请求，更新街道的Data
    jValue(newV, oldV) {
      console.log(111111, newV, oldV);
      if (newV !== oldV) {
        // this.jLabel = ''
        // this.jValue = ''
        // 调用Edit页面 --站点地址-- 街道（Data） 的方法
        // this.jzhandianfangfa(this.qLabel, this.qValue)
      }
    },
    lng(newV, oldV) {
      if (newV !== oldV) {
        console.log(newV, oldV, "===============");
      }
    }
  },
  updated() {
    // 选择省市区街下拉框，Edit页面的站点地址会改变
    if (this.sLabel && !this.cLabel && !this.qLabel && !this.jLabel) {
      this.formData.address = "";
      this.formData.address = this.sLabel;
    } else if (this.sLabel && this.cLabel && !this.qLabel && !this.jLabel) {
      this.formData.address = "";
      this.formData.address = this.sLabel + this.cLabel;
    } else if (this.sLabel && this.cLabel && this.qLabel && !this.jLabel) {
      this.formData.address = "";
      this.formData.address = this.sLabel + this.cLabel + this.qLabel;
    } else if (this.sLabel && this.cLabel && this.qLabel && this.jLabel) {
      this.formData.address = "";
      this.formData.address =
        this.sLabel + this.cLabel + this.qLabel + this.jLabel;
    } else {
    }
  }
};
</script>

<style scoped lang="scss">
#l-map {
  height: 250px;
  width: 100%;
}

#r-result {
  width: 100%;
}

/* // ControlEdit页面 站点地址的长度 */
.szddz {
  width: 130px;
}

.czddz {
  width: 130px;
}

.qzddz {
  width: 130px;
}

.jzddz {
  width: 130px;
}

.zhandiandiz {
  position: relative;

  top: -405px;
  left: 70px;
}

.zhandiandiz > span {
  margin-right: 10px;
}
</style>
